import './Tab.scss'
import {useState} from 'react'
import Stencil from '../../Drawdesigns/stencil/index'
import Text from '../../Drawdesigns/text/index'
import Text3D from '../../Drawdesigns/text3D/index'
import Material from '../../Drawdesigns/material/index'
import Imager from '../imager/imager'
import Background from '../Background/Background'
const Tab=()=>{
    const [activeIndex,setactiveIndex]=useState(0)
      const [drawerOpen, setDrawerOpen] = useState(false);
     const tabs = [
        { icon: 'icon-moban', label: '模版',content:<Stencil/> },
        { icon: 'icon-wenzi', label: '文字',content:<Text/>},
        { icon: 'icon-a-3Dwenzi', label: '3D文字',content:<Text3D/> },
        { icon: 'icon-a-ziyuan113', label: '素材',content:<Material/> },
        { icon: 'icon-tupian', label: '图片', content:<Imager/>},
        { icon: 'icon-huanbeijing', label: '背景',content:<Background/> },
        { icon: 'icon-erweima', label: '二维码' },
        { icon: 'icon-shangchuan', label: '上传' },
    ];

    const handleClick=(index)=>{
        
            setactiveIndex(index);
        setDrawerOpen(true);
    }
    const toggleDrawer=()=>{
        console.log('Toggling drawer...');
        setDrawerOpen(!drawerOpen);
    }
    return (
        <div className='tab_left'>
            {/* 渲染的tab */}
        <div className='tab-container'>
             {tabs.map((tab, index) => (
                <dl key={index} 
                    className={activeIndex === index ? 'active' : ''} 
                   onClick={() => handleClick(index)}>
                    <dt><span className={`iconfont ${tab.icon}`}></span></dt>
                    <dd><span>{tab.label}</span></dd>

                    
                </dl>
                
            ))}
            <div className='kefu'>
                    <dl>
                        <dt><span className='iconfont icon-kefu'></span></dt>
                        <dd>联系客服</dd>
                    </dl>
            </div>
                   
        </div>
        {/* 抽屉 */}
        <div className={`drawer ${drawerOpen ? 'open' : ''}`}>
           {tabs[activeIndex].content}
            <div onClick={toggleDrawer} className='anniu'>
                <span className={`iconfont ${drawerOpen ? 'icon-xiangzuojiantou' : 'icon-youjiantou'}`}></span>
            </div>
         </div>
          
        </div>
       
    )
}


export default Tab